<template>
  <div class="salon_page">
    <div class="salon_search">
      <region-select
        ref="refSalonSelect"
        :mode="2"
        :dept="2"
        :display="'row'"
        @selected="handleSalonSelected"></region-select>
      <el-button type="primary" icon="el-icon-search" size="small" @click="loadTimelineList">查询</el-button>
      <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column fixed prop="salonNo" label="店家编号" align="left" width="130"></el-table-column>
      <el-table-column
        fixed
        prop="salonName"
        label="店铺全称"
        align="left"
        width="200"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="diagnoseType" label="类型" align="left" width="80" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.diagnoseType | fitReviewOptions }}
        </template>
      </el-table-column>
      <el-table-column prop="context" label="诊断建议" align="center" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <el-link
            v-if="row.diagnoseType == 100"
            type="success"
            style="margin-left: 5px"
            @click.stop.native="handleOpenFile(row.salonId, row.context)">
            点击查看
          </el-link>
          <span v-else>{{ row.context }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="coachName" label="教练名称" align="center" width="120"></el-table-column>
      <el-table-column prop="createDate" label="创建时间" align="center" width="120" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.createDate ? row.createDate.substring(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="100">
        <template slot-scope="{ row, $index }">
          <el-button type="danger" size="mini" plain @click="handleDelete(row.id, $index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="loadTimelineList"></pagination>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { delTimelineDiagnose, geTimelineDiagnosePage } from '@/api/diagnose';
// 引入自定义组件
import Pagination from '@/components/Pagination';
import '@/utils/datefmt';
import RegionSelect from '@/views/salon/RegionSelect.vue';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const ReviewOptions = [
  { code: '5', name: '人力' },
  { code: '6', name: '客户运营' },
  { code: '7', name: '产品' },
  { code: '8', name: '制度' },
  { code: '9', name: '成本' },
  { code: '10', name: '新客' },
  { code: '11', name: '合规性' },
  { code: '100', name: '文件' },
];

export default {
  name: 'DiagTimeline',
  components: { Pagination, ['region-select']: RegionSelect },
  filters: {
    fitReviewOptions(val) {
      const tmp = ReviewOptions.find(x => x.code == val);
      if (tmp) {
        return tmp.name;
      }
      return '';
    },
  },
  data() {
    return {
      salon: {},
      total: 0,
      listQuery: {
        page: 1,
        limit: 12,
      },
      list: null,
      listLoading: false,
    };
  },
  computed: {
    ...mapGetters(['name']),
  },
  created() {
    this.loadTimelineList();
  },
  methods: {
    resetSearch() {
      this.salon.salonId = undefined;
      this.$refs.refSalonSelect.clearSelected();
      this.loadTimelineList();
    },
    handleSalonSelected: async function (salon) {
      if (salon) {
        this.salon.salonId = salon.salonId;
        this.salon.salonNo = salon.salonCode;
        this.salon.salonName = salon.salonName;
      }
    },
    handleOpenFile: async function (sid, name) {
      if (!name || !sid) {
        return;
      }
      // pdf 或者 txt
      const openUrl = `/pub/diagnose/timeline?relativePath=${name}&sid=${sid}`;
      window.open(openUrl, '_blank');
    },
    loadTimelineList() {
      if (this.listLoading) {
        return;
      }
      this.listLoading = true;
      const params = {
        pageNumber: this.listQuery.page,
        pageSize: this.listQuery.limit,
        sid: null,
      };
      if (this.salon.salonId) {
        params.sid = this.salon.salonId;
      }
      geTimelineDiagnosePage(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.list = ret.records;
            this.total = ret.total;
          }
        })
        .catch(err => {})
        .finally(() => (this.listLoading = false));
    },
    handleDelete(id, index) {
      const errAlertMsg = '删除失败';
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delTimelineDiagnose(id).then(res => {
            if (res.data.status !== apiSts.ResponseOK) {
              if (res.data.message) {
                MessageBox.alert(res.data.message);
              } else {
                MessageBox.alert(errAlertMsg);
              }
              return;
            }
            this.loadTimelineList();
            this.$message({ type: 'success', message: '删除成功' });
          });
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';

.salon_page {
  width: 100%;

  .salon_search {
    padding: 5px 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
  }
}

::v-deep .el-table td {
  padding: 5px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

::v-deep .salon_search .el-input {
  width: auto;
}
</style>
